<template>
  <div style="min-height:300px;">
    <el-row :gutter="20">
      <el-form 
        label-width="180px"
        :model="wxApplyDat"
        :rules="wxApplyDatRules"
        ref="wxApplyDat"
        >
        <el-col :span="12" v-if="wxApplyDat.changeType=='1'||wxApplyDat.changeType=='2'||wxApplyDat.changeType=='4'">
          <el-form-item label="法人身份证人像面:" prop="cardFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardFrontRequest"
              :limit="1"
              :file-list="cardFrontList"
              :on-remove="cardFrontRemove"
              :before-remove="beforecardFrontRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload> 
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="wxApplyDat.changeType=='1'||wxApplyDat.changeType=='2'||wxApplyDat.changeType=='4'">
          <el-form-item label="法人身份证国徽面:" prop="cardReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardReverseRequest"
              :limit="1"
              :file-list="cardReverseList"
              :on-remove="cardReverseRemove"
              :before-remove="beforecardReverseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="wxApplyDat.changeType=='1'||wxApplyDat.changeType=='2'||wxApplyDat.changeType=='4'">
          <el-form-item label="法人证件号:" prop="legalPersonId">
            <el-input
              v-model="wxApplyDat.legalPersonId"
              placeholder="请输入法人证件号"
            ></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="12" v-if="wxApplyDat.changeType=='3'||wxApplyDat.changeType=='4'">
          <el-form-item label="联系人身份证人像面:" prop="contactFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpContactFrontPicRequest"
              :limit="1"
              :file-list="contactFrontList"
              :on-remove="contactFrontPicRemove"
              :before-remove="beforecontactFrontPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="wxApplyDat.changeType=='3'||wxApplyDat.changeType=='4'">
           <el-form-item label="联系人身份证国徽面:" prop="contactReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpContactReversePicRequest"
              :limit="1"
              :file-list="contactReverseList"
              :on-remove="contactReversePicRemove"
              :before-remove="beforecontactReversePicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="wxApplyDat.changeType=='3'||wxApplyDat.changeType=='4'">
          <el-form-item label="联系人证件号:" prop="contactCertNo">
            <el-input
              v-model="wxApplyDat.contactCertNo"
              placeholder="请输入联系人证件号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="wxApplyDat.changeType=='3'||wxApplyDat.changeType=='4'">
          <el-form-item label="联系人身份证开始日期:" prop="idValiddateBegin">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="wxApplyDat.idValiddateBegin"
              placeholder="请输入身份证开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="wxApplyDat.changeType=='3'||wxApplyDat.changeType=='4'">
          <el-form-item label="联系人身份证结束日期:" prop="idValiddateEnd">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="wxApplyDat.idValiddateEnd"
              placeholder="请输入身份证结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="wxApplyDat.changeType=='3'||wxApplyDat.changeType=='4'">
          <el-form-item label="业务办理授权函:" prop="authLetter">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpAuthLetterPicRequest"
              :limit="1"
              :file-list="authLetterList"
              :on-remove="authLetterPicRemove"
              :before-remove="beforeauthLetterPicRemove"
              :on-exceed="authLetterPicExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="注册地址:" prop="registeredAddress">
            <el-input
              v-model="wxApplyDat.registeredAddress"
              placeholder="请输入注册地址"
            ></el-input>
          </el-form-item>
        </el-col>        
      </el-form>
    </el-row>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import { queryWXApplyData } from "@/api/rb-merchant/posinfo/pos_info_details";
import { uploadPrivate, uploadOCRCard } from "@/api/system/oss";

export default {
  props: {
    //商户
    rpiNo: {
      type: String
    },
  },
  data() {
    return {
      wxApplyDat:{},      //表单
      wxApplyDatRules:{
        cardFront: [{ required: true, message: "请上传法人身份证人像面",trigger: "blur" }],
        cardReverse: [{ required: true, message: "请上传法人身份证国徽面", trigger: "blur" }],
        legalPersonId: [{ required: true, message: "请输入法人证件号",trigger: "blur" }],
        contactFront: [{ required: true, message: "请上传联系人身份证证人像面",trigger: "blur" }],
        contactReverse: [{ required: true, message: "请上传联系人身份证国徽面", trigger: "blur" }],
        contactCertNo: [{ required: true, message: "请输入联系人证件号",trigger: "blur" }],
        idValiddateBegin: [{ required: true, message: "请输入联系人证件开始日期",trigger: "blur" }],
        idValiddateEnd: [{ required: true, message: "请输入联系人证件结束日期",trigger: "blur" }],
        authLetter: [{ required: true, message: "请上传业务办理授权函图片",trigger: "blur" }],
        registeredAddress: [{ required: true, message: "请输入法人身份证国徽面", trigger: "blur" }],
      }, //表单校验规则
      imgShow:false,      //预览图片显示
      imgUrlList:[],      //预览图片
      cardFrontList: [],  //法人身份证人像面
      cardReverseList: [],//法人身份证国徽面
      authLetterList: [], //业务办理授权函图片
      contactFrontList: [],   //联系人身份证国徽面
      contactReverseList: [], //联系人身份证国徽面
      
    };
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    // 获取实名认证数据
    getQueryWXApplyData(){
      let that = this;
      queryWXApplyData(this.rpiNo).then((res) => {
        if(res.data.code==200){
          let data=res.data.data;
          that.wxApplyDat = JSON.parse(JSON.stringify(res.data.data));

          // 法人人像面
          let cardFrontName = data.cardFront.split("/")
          this.cardFrontList.push({
            url:data.cardFrontUrl,
            name:cardFrontName[cardFrontName.length-1]
          })
          // 法人国徽面
          let cardReverseName = data.cardReverse.split("/")
          this.cardReverseList.push({
            url:data.cardReverseUrl,
            name:cardReverseName[cardReverseName.length-1]
          })
          // 业务办理授权函图片
          let authLetterName = data.authLetter.split("/")
          this.authLetterList.push({
            url:data.authLetterUrl,
            name:authLetterName[authLetterName.length-1]
          })
          // 联系人人像面
          let contactFrontName = data.contactFront.split("/")
          this.contactFrontList.push({
            url:data.contactFrontUrl,
            name:contactFrontName[contactFrontName.length-1]
          })
          // 联系人国徽面
          let contactReverseName = data.contactReverse.split("/")
          this.contactReverseList.push({
            url:data.contactReverseUrl,
            name:contactReverseName[contactReverseName.length-1]
          })
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    /* 法人身份证人像面上传 */
    httpCardFrontRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        let data = res.data.data;
        this.wxApplyDat.cardFront = data.link;
        this.wxApplyDat.legalPersonId = data.num;//法人身份证号
        // this.$refs.wxApplyDat.validateField("cardReverse");
      });
    },
    /* 法人身份证人像面删除 */
    cardFrontRemove(file, fileList) {
      this.cardFrontList = fileList;
      this.wxApplyDat.cardFront = "";
      this.wxApplyDat.legalPersonId = "";
    },
    beforecardFrontRemove() {
      return this.$confirm(`确定移除法人身份证人像面照片？`);
    },
    /* 法人身份证国徽面上传 */
    httpCardReverseRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        let data = res.data.data;
        this.wxApplyDat.cardReverse = data.link;//图片地址

        // this.$refs.wxApplyDat.validateField("cardReverse");
      });
    },
    /* 法人身份证国徽面删除 */
    cardReverseRemove(file, fileList) {
      this.cardReverseList = fileList;
      this.wxApplyDat.cardReverse = "";
    },
    beforecardReverseRemove() {
      return this.$confirm(`确定移除法人身份证国徽面照片？`);
    },
    /* 联系人身份证人像面上传 */
    httpContactFrontPicRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        let data = res.data.data;
        this.wxApplyDat.contactFront = data.link;
        this.wxApplyDat.contactCertNo = data.num;//联系人证件号
        // this.$refs.wxApplyDat.validateField("contactFront");
      });
    },
    /* 联系人身份证人像面删除 */
    contactFrontPicRemove(file, fileList) {
      this.contactFrontList = fileList;
      this.wxApplyDat.contactFront = "";
      this.wxApplyDat.contactCertNo = "";
    },
    beforecontactFrontPicRemove() {
      return this.$confirm(`确定移除联系人身份证人像面照片？`);
    },
    /* 联系人身份证国徽面上传 */
    httpContactReversePicRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        this.wxApplyDat.contactReverse = res.data.data.link;
        this.wxApplyDat.idValiddateBegin = res.data.data.startDate;
        this.wxApplyDat.idValiddateEnd = res.data.data.endDate;
        // this.$refs.wxApplyDat.validateField("contactReverse");
      });
    },
    /* 联系人身份证国徽面删除 */
    contactReversePicRemove(file, fileList) {
      this.contactReverseList = fileList;
      this.wxApplyDat.contactReverse = "";
      this.wxApplyDat.idValiddateBegin = "";
      this.wxApplyDat.idValiddateEnd = "";
    },
    beforecontactReversePicRemove() {
      return this.$confirm(`确定移除联系人身份证国徽面照片？`);
    },
    /* 业务办理授权函上传 */
    httpAuthLetterPicRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.wxApplyDat.authLetter = res.data.data.name;
        // this.$refs.wxApplyDat.validateField("authLetter");
      });
    },
    /* 业务办理授权函删除 */
    authLetterPicRemove(file, fileList) {
      this.authLetterList = fileList;
      this.wxApplyDat.authLetter = "";
    },
    beforeauthLetterPicRemove() {
      return this.$confirm(`确定移除业务办理授权函照片？`);
    },
  },
  created(){
     this.getQueryWXApplyData();
  }
  
};
</script>

<style lang="scss" scoped>
</style>
